<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>评分统计与历史记录</title>
    <script src="../../utils/reload.js"></script>
    <script src="./rests/3.4.17"></script>
    <link rel="stylesheet" href="../../style/all.min.css" />
    <script src="../../api/echarts.min.js"></script>
    <link rel="stylesheet" href="../../yl/index.css" />
    <link rel="stylesheet" href="../../style/index.css" />
    <script src="../../utils/utils.js"></script>
    <script src="../../config/config.js"></script>
    <script src="../../utils/mixins.js"></script>
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/zh-cn.mjs"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/jquery.min.js"></script>
    <script src="../../utils/jquery.cookie.js"></script>
    <script src="../../api/request.js"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#36CFC9",
              warning: "#FF7D00",
              danger: "#F53F3F",
              success: "#00B42A",
              "neutral-100": "#F2F3F5",
              "neutral-200": "#E5E6EB",
              "neutral-300": "#C9CDD4",
              "neutral-400": "#86909C",
              "neutral-500": "#4E5969",
              "neutral-600": "#272E3B",
              "neutral-700": "#1D2129",
            },
            fontFamily: {
              inter: ["Inter", "system-ui", "sans-serif"],
            },
            boxShadow: {
              card: "0 2px 14px 0 rgba(0, 0, 0, 0.06)",
              "card-hover": "0 4px 20px 0 rgba(0, 0, 0, 0.1)",
            },
          },
        },
      };
    </script>
    <style type="text/tailwindcss">
      .container {
        max-width: 100%;
      }
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .chart-container {
          @apply w-full h-[350px] bg-white rounded-lg shadow-card p-4 transition-all duration-300;
        }
        .tab-active {
          @apply border-b-2 border-primary text-primary font-medium;
        }
        .table-row-hover {
          @apply transition-colors duration-200 hover:bg-neutral-100;
        }
        /* 状态颜色类 */
        .text-success {
          @apply text-[#00B42A];
        }
        .text-warning {
          @apply text-[#FF7D00];
        }
        .text-danger {
          @apply text-[#F53F3F];
        }
        .bg-success\/10 {
          background-color: rgba(0, 180, 42, 0.1);
        }
        .bg-warning\/10 {
          background-color: rgba(255, 125, 0, 0.1);
        }
        .bg-danger\/10 {
          background-color: rgba(245, 63, 63, 0.1);
        }
      }
    </style>
  </head>
  <body class="bg-neutral-100 font-inter text-neutral-700 min-h-screen">
    <div id="app" class="container mx-auto px-4 py-8">
      <!-- [MODULE] a1b_主内容区域 -->
      <div class="space-y-6">
        <!-- [MODULE] c3d_评分统计与历史记录页面 -->
        <div>
          <!-- [MODULE] e5f_评分统计与历史记录页面:页面标题 -->
          <div class="flex justify-between items-center mb-6">
            <h1
              class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700"
            >
              评分统计与历史记录
            </h1>
          </div>
          <!-- [/MODULE] e5f_评分统计与历史记录页面:页面标题 -- 包含页面标题、导出数据按钮和刷新按钮 -->
          <!-- [MODULE] g7h_评分统计与历史记录页面:评分图表区域 -->
          <div class="mb-8">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold text-neutral-700">
                评分趋势分析
              </h2>
              <div class="flex border-b border-neutral-200">
                <button
                  id="daily-tab"
                  class="tab-active px-4 py-2 text-sm transition-all duration-200"
                >
                  每日
                </button>
                <button
                  id="weekly-tab"
                  class="px-4 py-2 text-sm text-neutral-500 transition-all duration-200"
                >
                  每周
                </button>
                <button
                  id="monthly-tab"
                  class="px-4 py-2 text-sm text-neutral-500 transition-all duration-200"
                >
                  每月
                </button>
              </div>
            </div>
            <div id="chart-container" class="chart-container"></div>
          </div>
          <!-- [/MODULE] g7h_评分统计与历史记录页面:评分图表区域 -- 包含每日/每周/每月切换标签和评分趋势折线图 -->
          <!-- [MODULE] i9j_评分统计与历史记录页面:历史记录列表 -->
          <div
            class="bg-white rounded-lg shadow-card overflow-hidden transition-all duration-300"
          >
            <div
              class="p-4 border-b border-neutral-200 flex justify-between items-center"
            >
              <h2 class="text-lg font-semibold text-neutral-700">历史记录</h2>
              <div class="flex items-center space-x-2">
                <input
                  v-model="search"
                  @keyup.enter="handleSearch"
                  type="text"
                  placeholder="搜索商户名..."
                  class="px-3 py-2 border border-neutral-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <button
                  @click="handleSearch"
                  class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  搜索
                </button>
              </div>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr class="bg-neutral-100 text-neutral-500 text-sm">
                    <th class="px-6 py-3 text-left font-medium">日期</th>
                    <th class="px-6 py-3 text-left font-medium">商户名称</th>
                    <th class="px-6 py-3 text-left font-medium">商户总分数</th>
                    <th class="px-6 py-3 text-left font-medium">行政评分</th>
                    <th class="px-6 py-3 text-left font-medium">用户评分</th>
                    <th class="px-6 py-3 text-left font-medium">评分人数</th>
                    <th class="px-6 py-3 text-left font-medium">状态</th>
                    <th class="px-6 py-3 text-left font-medium">操作</th>
                  </tr>
                </thead>
                <tbody id="history-table-body">
                  <!-- 示例数据行 -->
                  <tr
                    class="table-row-hover"
                    v-for="(item, index) in historyData"
                    :key="index"
                  >
                    <td
                      class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                    >
                      {{item.Data_Date }}
                    </td>
                    <td
                      class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                    >
                      {{item.Merchant_Alias}}
                    </td>
                    <td class="px-3 sm:px-6 py-3 sm:py-4">
                      <span
                        :class="['font-medium text-sm sm:text-base', getScoreClass(item.Total_Score)]"
                        >{{item.Total_Score}}</span
                      >
                    </td>
                    <td class="px-3 sm:px-6 py-3 sm:py-4">
                      <span
                        :class="['font-medium text-sm sm:text-base', getScoreClass(item.Admin_Score)]"
                        >{{item.Admin_Score}}</span
                      >
                    </td>
                    <td class="px-3 sm:px-6 py-3 sm:py-4">
                      <span
                        :class="['font-medium text-sm sm:text-base', getScoreClass(item.User_Score)]"
                        >{{item.User_Score}}</span
                      >
                    </td>
                    <td
                      class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                    >
                      {{item.Count}}
                    </td>
                    <td class="px-3 sm:px-6 py-3 sm:py-4">
                      <span
                        :class="['px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm font-medium', getStatusClass(item.Status)]"
                        >{{item.Status}}</span
                      >
                    </td>
                    <td class="px-3 sm:px-6 py-3 sm:py-4">
                      <button
                        class="text-primary hover:text-primary/80 transition-colors duration-200 text-xs sm:text-sm"
                        :data-item="JSON.stringify(item)"
                        @click="showDetails(item)"
                      >
                        查看详情
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="p-4 border-t border-neutral-200 flex justify-between items-center"
            >
              <div class="text-sm text-neutral-500">
                显示
                <span class="font-medium text-neutral-700">
                  {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage
                  * pageSize, total) }}
                </span>
                条，共
                <span class="font-medium text-neutral-700"> {{ total }} </span>
                条记录
              </div>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
                class="pagination-responsive"
              ></el-pagination>
            </div>
          </div>
          <!-- [/MODULE] i9j_评分统计与历史记录页面:历史记录列表 -- 包含搜索框、历史记录表格和分页控件 -->
        </div>
        <!-- [/MODULE] c3d_评分统计与历史记录页面 -- 包含评分统计图表和历史记录列表 -->
      </div>
      <!-- [/MODULE] a1b_主内容区域 -- 包含评分统计与历史记录页面的所有内容 -->
    </div>
    <!-- 评分详情模态框 -->
    <div
      id="detail-modal"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300"
    >
      <div
        class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300"
      >
        <div
          class="p-4 border-b border-neutral-200 flex justify-between items-center sticky top-0 bg-white z-10"
        >
          <h3 class="text-lg font-semibold text-neutral-700">评分详情</h3>
          <button
            id="close-modal"
            class="text-neutral-400 hover:text-neutral-700 transition-colors duration-200"
          >
            <i class="fas fa-times text-xl"> </i>
          </button>
        </div>
        <div class="p-6" id="modal-content">
          <!-- 模态框内容将通过JavaScript动态生成 -->
        </div>
      </div>
    </div>
  </body>

  <!-- [JSMOD] k2l_图表初始化与数据处理 -->
  <script id="chart-script">
    // 页面加载时初始化渲染
    document.addEventListener("DOMContentLoaded", function () {
      // 初始化图表
      initChart();

      // 生成历史记录表格数据
      generateHistoryTable();

      // 初始化标签切换事件
      initTabSwitch();

      // 初始化模态框事件
      initModalEvents();

      // 监听窗口大小变化，调整图表大小
      window.addEventListener("resize", function () {
        if (window.myChart) {
          window.myChart.resize();
        }
      });
    });
    // 初始化图表
    function initChart() {
      var chartDom = document.getElementById("chart-container");
      window.myChart = echarts.init(chartDom);

      // 默认显示每日数据
      updateChart("day");
    }
    // 更新图表数据
    function updateChart(period) {
      console.log(period);

      var xAxisData, totalScoreData, adminScoreData, userScoreData;
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/requestForward/requestForward?RequestURL=${encodeURIComponent(
          `/admin/charts/staticBusinessScore?type=${period}`
        )}`,
        type: "get",
        dataType: "json",
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        success: function (res) {
          console.log("API响应数据:", res);
          xAxisData = res.data.labels;

          totalScoreData = res.data.totalScore;
          adminScoreData = res.data.adminScore;
          userScoreData = res.data.userScore;
          var option = {
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255, 255, 255, 0.9)",
              borderColor: "#e5e6eb",
              borderWidth: 1,
              padding: 10,
              textStyle: {
                color: "#272E3B",
              },
              formatter: function formatter(params) {
                var result = params[0].name + "<br/>";
                params.forEach(function (item) {
                  var color = item.color;
                  var name = item.seriesName;
                  var value = item.value;
                  result +=
                    '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:50%;background-color:'.concat(
                      color,
                      '"></span>'
                    );
                  result += "".concat(name, ":").concat(value, "\u5206<br/>");
                });
                return result;
              },
              axisPointer: {
                type: "shadow",
                shadowStyle: {
                  color: "rgba(0, 0, 0, 0.05)",
                },
              },
            },
            legend: {
              data: ["商户总分数", "行政评分", "用户评分"],
              top: 0,
              textStyle: {
                color: "#4E5969",
              },
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 20,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: xAxisData,
              axisLine: {
                lineStyle: {
                  color: "#e5e6eb",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#4E5969",
                interval: 0,
                rotate: 45,
              },
            },
            yAxis: {
              type: "value",
              min: 75,
              max: 100,
              interval: 5,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#4E5969",
                formatter: "{value}分",
              },
              splitLine: {
                lineStyle: {
                  color: "#f2f3f5",
                },
              },
            },
            series: [
              {
                name: "商户总分数",
                type: "line",
                data: totalScoreData,
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  width: 3,
                  color: "#165DFF",
                },
                itemStyle: {
                  color: "#165DFF",
                  borderWidth: 2,
                  borderColor: "#fff",
                  shadowBlur: 4,
                  shadowColor: "rgba(22, 93, 255, 0.3)",
                },
                emphasis: {
                  symbolSize: 8,
                },
              },
              {
                name: "行政评分",
                type: "line",
                data: adminScoreData,
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  width: 3,
                  color: "#00B42A",
                },
                itemStyle: {
                  color: "#00B42A",
                  borderWidth: 2,
                  borderColor: "#fff",
                  shadowBlur: 4,
                  shadowColor: "rgba(0, 180, 42, 0.3)",
                },
                emphasis: {
                  symbolSize: 8,
                },
              },
              {
                name: "用户评分",
                type: "line",
                data: userScoreData,
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  width: 3,
                  color: "#FF7D00",
                },
                itemStyle: {
                  color: "#FF7D00",
                  borderWidth: 2,
                  borderColor: "#fff",
                  shadowBlur: 4,
                  shadowColor: "rgba(255, 125, 0, 0.3)",
                },
                emphasis: {
                  symbolSize: 8,
                },
              },
            ],
          };
          window.myChart.setOption(option);
        },
      });
    }
    // 初始化标签切换事件
    function initTabSwitch() {
      var dailyTab = document.getElementById("daily-tab");
      var weeklyTab = document.getElementById("weekly-tab");
      var monthlyTab = document.getElementById("monthly-tab");
      dailyTab.addEventListener("click", function () {
        dailyTab.classList.add("tab-active");
        dailyTab.classList.remove("text-neutral-500");
        weeklyTab.classList.remove("tab-active");
        monthlyTab.classList.remove("tab-active");
        weeklyTab.classList.add("text-neutral-500");
        monthlyTab.classList.add("text-neutral-500");
        updateChart("day");
      });
      weeklyTab.addEventListener("click", function () {
        weeklyTab.classList.add("tab-active");
        weeklyTab.classList.remove("text-neutral-500");
        dailyTab.classList.remove("tab-active");
        monthlyTab.classList.remove("tab-active");
        dailyTab.classList.add("text-neutral-500");
        monthlyTab.classList.add("text-neutral-500");
        updateChart("week");
      });
      monthlyTab.addEventListener("click", function () {
        monthlyTab.classList.add("tab-active");
        monthlyTab.classList.remove("text-neutral-500");
        dailyTab.classList.remove("tab-active");
        weeklyTab.classList.remove("tab-active");
        dailyTab.classList.add("text-neutral-500");
        weeklyTab.classList.add("text-neutral-500");
        updateChart("month");
      });
    }
  </script>
  <!-- [/JSMOD] k2l_图表初始化与数据处理 -- 负责初始化ECharts图表，处理每日/每周/每月数据切换，以及窗口大小变化时的图表调整 -->
  <!-- [JSMOD] m4n_历史记录表格生成与交互 -->
  <script id="table-script">
    // 生成历史记录表格数据
    function generateHistoryTable() {
      // 使用Vue实例的方法加载数据
      if (window.app) {
        window.app.loadHistoryData();
      }
    }
    // 初始化模态框事件
    function initModalEvents() {
      var modal = document.getElementById("detail-modal");
      var closeModal = document.getElementById("close-modal");

      // 关闭模态框
      closeModal.addEventListener("click", function () {
        modal.classList.add("hidden");
        setTimeout(function () {
          modal.classList.remove("opacity-0");
          modal.querySelector("div").classList.remove("scale-100");
          modal.querySelector("div").classList.add("scale-95");
        }, 300);
      });

      // 点击模态框外部关闭
      modal.addEventListener("click", function (e) {
        if (e.target === modal) {
          closeModal.click();
        }
      });

      // 按ESC键关闭
      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && !modal.classList.contains("hidden")) {
          closeModal.click();
        }
      });
    }
    // 显示详情模态框
    function showDetails(item) {
      console.log(item);
      $.ajax({
        headers: requestHeaders(),
        url: `${mh}/requestForward/requestForward?RequestURL=${encodeURIComponent(
          `/admin/charts/staticBusinessScoreDetail?staticBusinessScoreSerialNumber=${item.Static_Bussiness_Score_SerialNumber}`
        )}`,
        type: "get",
        dataType: "json",
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        success: function (res) {
          console.log("API响应数据:", res);
          let item = res.data.detail;
          let trend = res.data.trend;
          var modal = document.getElementById("detail-modal");
          var modalContent = document.getElementById("modal-content");
          var modalDiv = modal.querySelector("div");

          // 填充模态框内容
          modalContent.innerHTML =
            '<div class="mb-6">\n<h4 class="text-sm text-neutral-500 mb-1">\u5546\u6237\u540D\u79F0</h4>\n                    <p class="text-lg font-medium text-neutral-700">'
              .concat(
                item.Merchant_Alias,
                '</p>\n                </div>\n                <div class="mb-6">\n                    <h4 class="text-sm text-neutral-500 mb-1">\u65E5\u671F</h4>\n                    <p class="text-neutral-700">'
              )
              .concat(
                item.Data_Date,
                '</p>\n                </div>\n                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">\n                    <div class="bg-neutral-100 rounded-lg p-4 text-center">\n                        <h4 class="text-sm text-neutral-500 mb-2">\u5546\u6237\u603B\u5206\u6570</h4>\n                        <p class="text-3xl font-bold'
              )
              .concat(
                item.Total_Score >= 90
                  ? "text-success"
                  : item.Total_Score >= 85
                  ? "text-warning"
                  : "text-danger",
                '">'
              )
              .concat(
                item.Total_Score,
                '</p>\n                    </div>\n                    <div class="bg-neutral-100 rounded-lg p-4 text-center">\n                        <h4 class="text-sm text-neutral-500 mb-2">\u884C\u653F\u8BC4\u5206</h4>\n                        <p class="text-3xl font-bold'
              )
              .concat(
                item.Admin_Score >= 90
                  ? "text-success"
                  : item.Admin_Score >= 85
                  ? "text-warning"
                  : "text-danger",
                '">'
              )
              .concat(
                item.Admin_Score,
                '</p>\n</div>\n<div class="bg-neutral-100 rounded-lg p-4 text-center">\n<h4 class="text-sm text-neutral-500 mb-2">\u7528\u6237\u8BC4\u5206</h4>\n                        <p class="text-3xl font-bold'
              )
              .concat(
                item.User_Score >= 90
                  ? "text-success"
                  : item.User_Score >= 85
                  ? "text-warning"
                  : "text-danger",
                '">'
              )
              .concat(
                item.User_Score,
                '</p>\n</div>\n</div>\n<div class="mb-6">\n<h4 class="text-sm text-neutral-500 mb-2">\u8BC4\u5206\u4EBA\u6570</h4>\n                    <p class="text-neutral-700">'
              )
              .concat(
                item.Count,
                '\u4EBA\u53C2\u4E0E\u8BC4\u5206</p>\n                </div>\n                <div class="mb-6">\n                    <h4 class="text-sm text-neutral-500 mb-2">\u72B6\u6001</h4>\n                    <span class="px-3 py-1 rounded-full text-sm font-medium'
              )
              .concat(
                item.Status === "正常"
                  ? "bg-success/10 text-success"
                  : item.Status === "需关注"
                  ? "bg-warning/10 text-warning"
                  : "bg-danger/10 text-danger",
                '">'
              )
              .concat(
                item.Status,
                '</span>\n                </div>\n                <div class="mb-6">\n                    <h4 class="text-sm text-neutral-500 mb-2">\u8BC4\u5206\u8D8B\u52BF</h4>\n                    <div class="w-full h-[200px] bg-neutral-100 rounded-lg p-2" id="mini-chart"></div>\n                </div>\n                <div class="flex justify-end space-x-3 pt-4 border-t border-neutral-200">\n                    <button id="modal-close-btn" class="px-4 py-2 border border-neutral-200 text-neutral-600 rounded-lg hover:bg-neutral-100 transition-colors duration-200">\u5173\u95ED</button>\n                </div>'
              );

          // 显示模态框
          modal.classList.remove("hidden");
          setTimeout(function () {
            modal.classList.add("opacity-100");
            modalDiv.classList.remove("scale-95");
            modalDiv.classList.add("scale-100");
          }, 10);

          // 为模态框内的关闭按钮添加事件
          document
            .getElementById("modal-close-btn")
            .addEventListener("click", function () {
              document.getElementById("close-modal").click();
            });

          // 初始化迷你图表
          setTimeout(function () {
            initMiniChart(trend);
          }, 300);
        },
        error: function (xhr, status, error) {
          console.error("获取数据失败:", error);
        },
      });
    }
    // 初始化迷你图表
    function initMiniChart(item) {
      console.log(item);

      var chartDom = document.getElementById("mini-chart");
      var miniChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b}: {c}分",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: item.labels,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 10,
            color: "#4E5969",
          },
        },
        yAxis: {
          type: "value",
          min: Math.max(75, (item.totalScore || 85) - 10),
          max: Math.min(100, (item.totalScore || 85) + 5),
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "商户总分数",
            type: "line",
            data: item.totalScore || [
              item.totalScore - 8,
              item.totalScore - 5,
              item.totalScore - 2,
              item.totalScore,
            ],
            smooth: true,
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              width: 2,
              color: "#165DFF",
            },
            itemStyle: {
              color: "#165DFF",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(22, 93, 255, 0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(22, 93, 255, 0)",
                },
              ]),
            },
          },
        ],
      };
      miniChart.setOption(option);

      // 监听窗口大小变化，调整迷你图表大小
      window.addEventListener("resize", function () {
        miniChart.resize();
      });

      // 当模态框关闭时销毁迷你图表
      document
        .getElementById("close-modal")
        .addEventListener("click", function () {
          miniChart.dispose();
        });
    }
  </script>
  <!-- [/JSMOD] m4n_历史记录表格生成与交互 -- 负责生成历史记录表格数据，处理查看详情按钮点击事件，以及详情模态框的显示与交互 -->

  <!-- Vue实例初始化 -->
  <script>
    const { createApp } = Vue;

    const app = createApp({
      data() {
        return {
          // 历史记录数据
          historyData: [],
          total: 0,
          currentPage: 1,
          pageSize: 10,
          loading: false,
          search: "", // 搜索关键词
        };
      },
      methods: {
        // 根据分数获取样式类
        getScoreClass(score) {
          if (score >= 90) return "text-success";
          if (score >= 85) return "text-warning";
          return "text-danger";
        },
        // 根据状态获取样式类
        getStatusClass(status) {
          if (status === "正常") return "bg-success/10 text-success";
          if (status === "需关注") return "bg-warning/10 text-warning";
          if (status === "需改进") return "bg-danger/10 text-danger";
          return "bg-neutral-100 text-neutral-500";
        },
        // 显示详情模态框
        showDetailModal(item) {
          showDetails(item);
        },
        // 显示详情
        showDetails(item) {
          showDetails(item);
        },
        // 分页变化处理
        handlePageChange(page) {
          this.currentPage = page;
          this.loadHistoryData();
        },
        // 加载历史数据
        loadHistoryData() {
          this.loading = true;
          $.ajax({
            headers: requestHeaders(),
            url: `${mh}/requestForward/requestForward?RequestURL=${encodeURIComponent(
              `/admin/charts/staticBusinessScoreList?search=${encodeURIComponent(
                this.search
              )}&pageNum=${this.currentPage}&pageSize=${this.pageSize}`
            )}`,
            type: "get",
            dataType: "json",
            complete: (XMLHttpRequest) => {
              requestPretreatment(XMLHttpRequest);
              this.loading = false;
            },
            success: (res) => {
              console.log("API响应数据:", res);
              if (res.data && res.data.list) {
                this.historyData = res.data.list;
                this.total = res.data.total || 0;
              } else {
                this.historyData = [];
                this.total = 0;
              }
            },
            error: (xhr, status, error) => {
              console.error("加载数据失败:", error);
              this.historyData = [];
              this.total = 0;
            },
          });
        },
        // 处理搜索
        handleSearch() {
          this.currentPage = 1; // 重置到第一页
          this.loadHistoryData();
        },
      },
    });

    // 使用Element Plus
    app.use(ElementPlus);

    // 挂载Vue应用
    window.app = app.mount("#app");

    // 初始化加载数据
    window.app.loadHistoryData();
  </script>
</html>
